<!--
 * @Author: ckk
 * @Date: 2022-08-12 08:59:06
 * @LastEditors: ckk
 * @LastEditTime: 2022-08-31 15:54:38
 * @Description: 金刚区图标超过八个采取轮播模式
-->

<template>
  <div class="jingang-swiper">
    <yj-mob-swipe class="my-swipe"  :loop="false">
      <yj-mob-swipe-item v-for="(item, index) in organizeData(datas)" :key="index">
        <jingang-district :datas="item.list" :setStyle="setStyle"></jingang-district>
      </yj-mob-swipe-item>
    </yj-mob-swipe>
  </div>
</template>

<script>
import { Swipe, SwipeItem } from 'yj-mob-ui';
export default {
  components: {
    'jingang-district': () => import('../JingangDistrict'),
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem
  },
  name: 'jingangSwiper',
  props: {
    datas: Array,
    setStyle: Object
  },
  data () {
    return {
      jingangSwiperList: []
    };
  },
  methods: {
    /**
     * @description: 整理数据，判断金刚区显示的是轮播每页8个
     * @param {*}
     * @Author: ckk
     * @Date: 2022-08-12 09:38:48
     * @return {*}
     */
    organizeData (list) {
      const newList = [],
        num = Math.ceil(list.length / 8);
      for (let i = 0; i < num; i++) {
        const obj = list.slice(i * 8, i * 8 + 8);
        newList.push({ list: obj });
      }
      return newList;
    }
  }
};
</script>

<style scoped lang="scss">
.jingang-swiper {
  height: 194px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  ::v-deep {
    .van-swipe__indicator {
      width: 6px;
      height: 6px;
      background: #bfbfbf;
      border-radius: 50%;
    }
    .van-swipe__indicator--active {
      width: 18px;
      height: 6px;
      background: #53c856;
      border-radius: 10px;
    }
    .van-swipe {
      height: 100%;
    }
  }
}
</style>
